<template>
  <my-layout sTitle="万科汉阳国际三室两">
    <div ref="krpano" slot="content" class="krpano"></div>
    <div slot="content" class="rcm-content">
      <div class="rcm-list-box">
        <div class="rcm-list" @click="handleShoplist">
          <img src="@/assets/images/Group8.png" alt>
          <div>商品</div>
        </div>
        <div class="rcm-list" @click="handlePmt">
          <img src="@/assets/images/Group9.png" alt>
          <div>房间</div>
        </div>
        <div class="rcm-list" @click="handleRoomlist">
          <img src="@/assets/images/Group20.png" alt>
          <div>户型图</div>
        </div>
      </div>

      <transition name="move">
        <shoplist
          @handleParent="closeShops"
          @handlePop="handlePop"
          :shops="shops"
          v-show="isShowShoplist"
        ></shoplist>
      </transition>
      <transition name="move">
        <roomlist :rooms="rooms" @handleParent="handleRoomlist" v-show="isShowRoomlist">></roomlist>
      </transition>
      <div class="pmt" v-show="isShowPic">
        <i @click="isShowPic=!isShowPic">
          <img src="@/assets/images/copy.png" alt>
        </i>
        <img src="http://xlylf-hlj.oss-cn-hangzhou.aliyuncs.com/house/1537342012403.户型图1.1.jpg" alt>
      </div>
      <my-popup :isShowpop="isShowPopup"></my-popup>
    </div>
  </my-layout>
</template>

<script>
import shoplist from "./components/shoplist";
import roomlist from "./components/roomlist";
import { loadScript, addSpot } from "./util";

export default {
  components: {
    shoplist,
    roomlist
  },
  data() {
    return {
      isShowShoplist: false,
      isShowRoomlist: false,
      isShowPic: false,
      isShowPopup: false,
      info: {},
      rooms: [],
      shops: [],
      flag: true,
      bol: false,
      ids: []
    };
  },
  methods: {
    // 样板间详情
    async getProgDetail() {
      let id = this.$route.query.id;
      const { data } = await this.$http.post("prog/detail", {
        id: id
      });
      if (data.code == 0) {
        this.info = data.prog;
        this.shops = data.prog.gds;
        this.ids = data.prog.gds.map(item => {
          return item.id;
        });
        console.log(this.ids);
        if (this.flag) this.loadScript();
      }
    },
    // 全景图插件
    async loadScript() {
      const src = `${this.info.url}/tour.js`,
        xml = `${this.info.url}/tour.xml`;

      await loadScript({
        src: src,
        xml: xml,
        container: this.$refs.krpano
      });
      window.krpano = document.getElementById("krpanoSWFObject");

      this.rooms = krpano.get("scene").getArray();

      setTimeout(() => {
        this.addSceneHot();
      }, 5000);
    },
    // 添加购物车接口
    async addPub(id, num) {
      const { data } = await this.$http.post("cart/addPub", {
        gdid: id,
        addNum: num
      });
    },
    async cartAdds(id) {
      const { data } = await this.$http.post("cart/adds", {
        ids: id
      });
    },
    addSceneHot() {
      if (this.info.contents) {
        const contents = JSON.parse(this.info.contents),
          name = krpano.get("xml.scene");
        contents.spots
          .filter(spot => spot.type != 2 && spot.scene == name)
          .forEach(spot => {
            addSpot(spot.name, spot.h, spot.v, spot.url, () => {
              if (spot.type == 0) {
                this.loadscene(spot.scene);
              } else if (spot.type == 1) {
                this.isShowShoplist = !this.isShowShoplist;

                this.shops = this.info.gds.filter(item => {
                  if (item.id == spot.attr.id) return item;
                });
                this.bol = true;
              }
            });
          });
      }
    },
    loadscene(name) {
      krpano.call(`loadscene(${name})`);
      setTimeout(() => {
        this.addSceneHot();
      }, 5000);
    },
    handleShoplist() {
      this.bol = false;
      this.flag = false;
      this.getProgDetail();
      let temp = this.isShowRoomlist || this.isShowPic;
      if (!temp) this.isShowShoplist = !this.isShowShoplist;
    },
    closeShops() {
      this.isShowShoplist = !this.isShowShoplist;
    },
    handleRoomlist() {
      let temp = this.isShowShoplist || this.isShowPic;
      if (!temp) this.isShowRoomlist = !this.isShowRoomlist;
    },
    handlePmt() {
      let temp = this.isShowShoplist || this.isShowRoomlist;
      if (!temp) this.isShowPic = !this.isShowPic;
    },
    // 子组件添加按钮
    handlePop() {
      if (this.bol) {
        // 单个商品
        this.addPub(this.shops[0].id, 1);
      } else {
        // 所有商品
        console.log("存储所有");
        this.cartAdds(JSON.stringify(this.ids));
      }
      this.closeShops();
      this.isShowPopup = true;
      let time = setTimeout(() => {
        this.isShowPopup = false;
      }, 1200);
    }
  },
  mounted() {
    this.getProgDetail();
  }
};
</script>

<style lang="scss">
.rcm-content {
  .pmt {
    height: 468px;
    width: 468px;
    position: absolute;
    top: 79px;
    left: 48px;

    > img {
      width: 100%;
      height: 468px;
    }
    i {
      position: absolute;
      right: -60px;
      top: -35px;
      img {
        width: 48px;
        height: 48px;
        vertical-align: middle;
      }
    }
  }

  .rcm-list-box {
    position: absolute;
    right: 48px;
    top: 210px;
    text-align: center;
    .rcm-list {
      width: 92px;
      height: 92px;
      text-align: center;
      border-radius: 9px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 22px;
      right: 48px;
      // padding: 0 23px;

      img {
        margin: 12px 0 4px;
        // display: block;
        width: 38px;
        height: 38px;
        // margin: 10px auto;
      }
      margin-bottom: 25px;
    }
  }
}
.move-enter-active,
.move-leave-active {
  transition: all 0.43s;
}
.move-enter,
.move-leave-to {
  transform: translateY(100%);
}

.krpano,
#krpano {
  height: 100%;
}
</style>
